/**
 * @Name:  Refs
 * @Author:
 * @Desc:
 * @Date: 2021-01-13 09:25:16
 */
import React, { Component } from "react";
import { Title, HighLightJs } from "@/component";
import { Modal } from "antd";
import { getNewsList } from "@/api/test";
import styles from "@/pages/ReactAdvancedGuides/styles.module.less";
class Refs extends Component {
  render() {
    const data = { code: 0, name: "001" };
    // const ref = React.createRef({ code: "111" });
    // console.log("ref===00", ref);
    return (
      <div className={styles.block}>
        <Title text={"Refs-转发"} />
        <Test ref={data}>这是children</Test>
        <Test1 {...data} tag="22" />
      </div>
    );
  }
}

const Test = React.forwardRef((props, ref) => {
  console.log("props===", props);
  console.log("ref===", ref);
  return (
    <div ref={ref}>
      <codearea>第二个参数 ref 只在使用 React.forwardRef 定义组件时存在。常规函数和 class 组件不接收 ref 参数，且 props 中也不存在 ref</codearea>
      test
      <p>{props.children}</p>
    </div>
  );
});

class Test1 extends Component {
  render() {
    console.log("test1===", this.props);
    const { code, name, tag } = this.props;
    return (
      <div>
        test1-<span>{code}</span>-<span>{name}</span>-<span>{tag}</span>
      </div>
    );
  }
}

export default Refs;
